<template>
    <div>
        <!-- 顶部tab -->
        <header_></header_>
        <!-- 搜索栏 -->
        <search></search>
        <!-- 首页导航栏 -->
        <div class="top-nav bg3">
            <div class="nav-box inner">
                <div class="all-cat">
                    <div class="title"><i class="iconfont icon-menu"></i> 全部分类</div>

                    <div class="cat-list__box">
                        <div class="cat-box" v-for="(v, k) in categoryInfo">
                            <div class="title">
                                <i class="iconfont icon-skirt ce"></i>
                                <span v-text="v.name" @click="category(v.category_id)"></span>
                            </div>
                            <ul class="cat-list clearfix">
                                <li @click="category(v1.category_id)" v-for="(v1, k1) in v.list" v-text="v1.name"></li>
                            </ul>
                            <div class="cat-list__deploy">
                                <div class="deploy-box">
                                    <div class="genre-box clearfix" v-for="(v1, k1) in v.list">
                                        <span class="title"><span v-text="v1.name"></span>：</span>
                                        <div class="genre-list">
                                            <a @click="category(v2.category_id)" v-for="(v2, k2) in v1.list" v-text="v2.name"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="nva-list">
                    <a href="/">
                        <li class="active">首页</li>
                    </a>
                </ul>
            </div>
        </div>

        <!-- 顶部轮播 -->
        <div class="swiper-container banner-box">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(v, k) in bannerInfo">
                    <router-link :to="'/detail?id=' + v.id">
                        <img :src="v.image" class="cover" />
                    </router-link>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <div class="content inner" style="margin-bottom: 40px;">
            <section v-for="(v, k) in goodsInfo" :class="[k % 2 == 0 ? 'floor-2' : 'floor-3', 'scroll-floor']">
                <div class="floor-title">
                    <i class="iconfont icon-skirt fz16"></i><span v-text="v.categorys.name"></span>
                    <div class="case-list fz0 pull-right">
                        <a v-for="(v1, k1) in v.categorys.list"><span v-text="v1.name"></span></a>
                    </div>
                </div>
                <div class="con-box">
                    <div class="right-box">
                        <router-link :to="'/detail?id=' + v1.id" class="floor-item" v-for="(v1, k1) in v.goods">
                            <div class="item-img hot-img">
                                <img :src="v1.image" class="cover" />
                            </div>
                            <div class="price clearfix">
                                <span class="pull-left cr fz16" v-text="'￥' + v1.price"></span>
                                <span class="pull-right c6">价格</span>
                            </div>
                            <div class="name ep" v-text="v1.title"></div>
                        </router-link>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>

<script>
import header_ from "../components/header_";
import search from "../components/search";
import { category, banner, goodsRecommend } from "../lib/interface";

export default {
    components: { header_, search },
    name: "index",
    data() {
        return {
            categoryInfo: [],
            bannerInfo: [],
            isShow: 0,
            goodsInfo: [],
        };
    },
    mounted() {
        this.$nextTick(function() {
            this.isShow = 1;
            setTimeout(function() {
                var banner_swiper = new Swiper(".banner-box", {
                    autoplayDisableOnInteraction: false,
                    pagination: ".banner-box .swiper-pagination",
                    paginationClickable: true,
                    autoplay: 5000,
                });
                // 新闻列表滚动
                var notice_swiper = new Swiper(".notice-box .swiper-container", {
                    paginationClickable: true,
                    mousewheelControl: true,
                    direction: "vertical",
                    slidesPerView: 10,
                    autoplay: 2e3,
                });
            }, 2000);
        });
        this.getCategoryInfo();
        this.getBannerInfo();
        this.getGoodsInfo();
    },
    methods: {
        category(id) {
            this.$router.replace("/category?cid=" + id);
        },
        async getCategoryInfo() {
            let result = await category();
            this.categoryInfo = result.data;
            console.log(this.categoryInfo);
        },
        async getBannerInfo() {
            let result = await banner();
            console.log("banner:", result);
            this.bannerInfo = result.data;
            console.log("bannerInfo:", this.bannerInfo);
        },
        async getGoodsInfo() {
            let result = await goodsRecommend();
            this.goodsInfo = result.data;
            console.log("goodsRecommend", result);
        },
    },
};
</script>

<style scoped></style>
